<template>
  <el-container>
    <el-header>
      <h2>购物车</h2>
    </el-header>
    <el-main>
      <el-table :data="cartItems" style="width: 100%">
        <el-table-column prop="image" label="图片">
          <template #default="scope">
            <img
              :src="getImagePath(scope.row.image)"
              alt=""
              style="width: 50px; height: 50px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="产品名称"></el-table-column>
        <el-table-column prop="price" label="价格">
          <template #default="scope"> ¥{{ scope.row.price }} </template>
        </el-table-column>
        <el-table-column label="数量">
          <template #default="scope">
            <el-input-number
              v-model="scope.row.quantity"
              :min="1"
              @change="updateQuantity(scope.$index, scope.row)"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="text" @click="removeItem(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="total">
        <p>总价: ¥{{ total }}</p>
      </div>
      <el-button type="primary" @click="checkout">结算</el-button>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, computed } from "vue";
import { useAuthStore } from "@/stores/auth";
import s88 from "@/assets/racket/s88.jpg";
import pro800 from "@/assets/racket/pro800.jpg";
import pro11 from "@/assets/racket/pro11.jpg";
import pcaz2 from "@/assets/shoes/pcaz2.jpg";
import cfz3 from "@/assets/shoes/cfz3.jpg";
import pce3 from "@/assets/shoes/pce3.jpg";
import l63 from "@/assets/line/l63.jpg";
import ab from "@/assets/line/ab.jpg";
import l95 from "@/assets/line/l95.jpg";
const authStore = useAuthStore();
const cartItems = ref([]);

// 映射图片路径
const imageMap = {
  "@/assets/racket/s88.jpg": s88,
  "@/assets/racket/pro800.jpg": pro800,
  "@/assets/racket/pro11.jpg": pro11,
  "@/assets/shoes/pcaz2.jpg": pcaz2,
  "@/assets/shoes/cfz3.jpg": cfz3,
  "@/assets/shoes/pce3.jpg": pce3,
  "@/assets/line/l63.jpg": l63,
  "@/assets/line/ab.jpg": ab,
  "@/assets/line/l95.jpg": l95,
};
const getImagePath = (path) => {
  return imageMap[path] || path;
};
// 合并相同的商品
const mergeItems = () => {
  const mergedItems = {};
  authStore.shop.forEach((item) => {
    if (mergedItems[item.id]) {
      mergedItems[item.id].quantity += 1;
    } else {
      mergedItems[item.id] = { ...item, quantity: 1 };
    }
  });
  cartItems.value = Object.values(mergedItems);
};

// 初始化购物车数据
mergeItems();

// 更新数量
const updateQuantity = (index, item) => {
  if (item.quantity < 1) {
    item.quantity = 1;
  }
  authStore.shop = authStore.shop.map((i) => {
    if (i.id === item.id) {
      return item;
    }
    return i;
  });
};

// 删除商品
const removeItem = (index) => {
  const itemId = cartItems.value[index].id;
  authStore.shop = authStore.shop.filter((item) => item.id !== itemId);
  mergeItems();
};

// 总价计算
const total = computed(() => {
  return cartItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0);
});

// 结算
const checkout = () => {
  authStore.shop = [];
  cartItems.value = [];
  alert("结算成功，购物车已清空！");
};
</script>

<style scoped>
.el-container {
  width: 80%;
  margin: 40px auto;
  display: block;
}
.total {
  margin: 20px 0;
  text-align: right;
}
.el-button {
  margin-top: 20px;
  width: 100%;
  background: #0057b8;
  color: white;
  height: 40px;
}
</style>
